<template>
    <div>
      <h2>Collect</h2>
      <gallery v-bind:imageList="collectList"></gallery>
      <el-pagination
        background
        layout="prev, next"
        @prev-click="preClick()"
        @next-click="nextClick()">
      </el-pagination>
    </div>
</template>

<script>
import Gallery from '../../views/Gallery'
export default {
  name: 'Collect',
  components: { Gallery },
  data () {
    return {
      collectList: {}
    }
  },
  methods: {
    getCollectList () {
      const userId = this.$store.getters.getCurrentUserId
      // console.log('userId(getCollectList):' + userId)
      this.$axios.get('/images/collect', {
        params: { userId },
        headers: { Authorization: this.$store.state.jwt }
      })
        .then(response => {
          this.collectList = response.data.data
        })
    },
    preClick () {
      if (this.collectList.hasPreviousPage) {
        const pageNum = this.collectList.pageNum - 1
        const userId = this.$store.getters.getCurrentUserId
        this.$axios.get('/images/collect', {
          params: { pageNum, userId },
          headers: { Authorization: this.$store.state.jwt }
        }).then(response => {
          this.collectList = response.data.data
        })
      }
    },
    nextClick () {
      if (this.collectList.hasNextPage) {
        const pageNum = this.collectList.pageNum + 1
        const userId = this.$store.getters.getCurrentUserId
        this.$axios.get('/images/collect', {
          params: { pageNum, userId },
          headers: { Authorization: this.$store.state.jwt }
        }).then(response => {
          this.collectList = response.data.data
        })
      }
    }
  },
  mounted () {
    if (this.$store.state.loggedIn) {
      this.getCollectList()
    }
  }
}
</script>

<style scoped>

</style>
